<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3</title>
    <style>
      * {
        box-sizing: border-box;
      }
      html {
        overflow: hidden;
      }
      #app {
        width: 375px;
        height: 750px;
        margin: 0px auto;
        border: 1px solid #ddd4d4;
        position: relative;
      }
      .home {
        width: 100%;
        padding: 0;
        margin: 0;
        height: 67vh;
        box-sizing: border-box;
        background-color: #f8f8f8;
        background-size: contain;
      }
      .home-box {
        display: flex;
        flex-direction: column;
        padding-top: 80px;
        height: 550px;
      }
      .home-box__title {
        font-size: 26px;
        color: #fff;
        white-space: nowrap;
        margin: 0 auto;
      }
      .home-box__bottom {
        position: relative;
        width: 345px;
        height: 210px;
        background-color: #fff;
        border-radius: 8px;
        margin: 130px auto 0;
      }
      .home-box__bottom--img {
        background-size: 100% auto;
        background-repeat: no-repeat;
        width: 140px;
        height: 165px;
        margin-top: -20px;
      }
      .home-box__bottom--right {
        padding: 15px;
        position: absolute;
        top: 18px;
        right: 0px;
      }
      .home-box__bottom--right__img {
        background-size: 100% auto;
        background-repeat: no-repeat;
        width: 124px;
        height: 25px;
        margin-bottom: 5px;
      }
      .home-box__bottom--right__title {
        font-size: 12px;
        color: #2f2f2f;
        font-weight: 700;
      }
      .home-box__bottom--right__tip {
        font-size: 12px;
        color: #afb0b2;
        margin-bottom: 13px;
        width: 186px;
      }
      .home-box__bottom--btn {
        font-size: 12px;
        width: 110px;
        margin: 0 auto;
        line-height: 12px;
        color: white;
        background-color: #ff8350;
        padding: 10px 20px;
        box-shadow: 0px 5px 15px 0.5px #ff8350;
        border-radius: 15px;
        text-align: center;
      }
      .home-box__tabber {
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        display: inline-block;
        background-color: #f7f7fa;
        color: #666;
        width: 100%;
      }
      .home-box__tabber--box {
        width: 120px;
        display: inline-block;
        text-align: center;
        height: 50px;
      }
      .img {
        width: 17px;
      }
      body {
        margin: 0px;
        font-size: 14px;
      }
      .card2,
      .card3 {
        background-color: #fff;
        margin: 0 auto;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        position: relative;
      }
      .card2 {
        width: 325px;
        height: 9px;
        z-index: 888;
        opacity: 0.8;
      }
      .card3 {
        width: 300px;
        height: 10px;
        z-index: 777;
        opacity: 0.7;
      }
    </style>
    <style>
      [v-cloak] {
        display: none !important;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <div class="home" :style="{ backgroundImage: `url(${homeBack})` }">
        <div class="home-box">
          <div class="home-box__title">{{title}}</div>
          <div class="home-box__bottom">
            <div class="home-box__bottom--top">
              <img :src="src" alt="" class="home-box__bottom--img" />
              <div class="home-box__bottom--right">
                <img :src="logoSrc" alt="" class="home-box__bottom--right__img" />
                <div class="home-box__bottom--right__title">成长无忧疫苗保障计划</div>
                <div class="home-box__bottom--right__tip">不限接种次数及疫苗类型儿童疫苗专属保障</div>
              </div>
            </div>
            <div class="home-box__bottom--btn" @click="">立即查看</div>
          </div>
          <div class="card2"></div>
          <div class="card3"></div>
          <div class="home-box__tabber">
            <div class="home-box__tabber--box">
              <img :src="homeSrc" alt="" class="img" />
              <div>首页</div>
            </div>
            <div class="home-box__tabber--box">
              <img :src="findSrc" alt="" class="img" />
              <div>发现</div>
            </div>
            <div class="home-box__tabber--box">
              <img :src="privateSrc" alt="" class="img" />
              <div>个人中心</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://img.ins-box.com/static/js/vue_3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script type="module">
      const { createApp, reactive, toRefs, ref, onMounted } = Vue

      const app = createApp({
        setup() {
          const id = ref()
          const src = `${window.location.origin}/static/img/cdc/tabbar/child.png`
          // const src = 'https://dev-img01.oss-cn-hangzhou.aliyuncs.com/Xcx/home/child.png'
          const logoSrc = `${window.location.origin}/static/img/cdc/tabbar/WechatIMG27.png`
          // const logoSrc = 'https://img.ins-box.com/image/brand/202210/WechatIMG27.png'
          const homeSrc = `${window.location.origin}/static/img/cdc/tabbar/homepage.png`
          const findSrc = `${window.location.origin}/static/img/cdc/tabbar/note_default.png`
          const privateSrc = `${window.location.origin}/static/img/cdc/tabbar/myCenter_default.png`
          const homeBack = `${window.location.origin}/static/img/cdc/tabbar/home_back.png`
          const title = '疫苗险微信H5 V2.0'

          const handleLoaded = () => {
            return new Promise((resolve, reject) => {
              html2canvas(document.querySelector('#app'))
                .then(canvas => {
                  resolve(canvas.toDataURL())
                })
                .catch(err => {
                  console.error(err)
                })
            })
          }

          const loadHandle = () => {
            setTimeout(async () => {
              let src = await handleLoaded()
              let msg = { src: src }
              parent.postMessage(msg, '*')
            }, 1000)
          }

          window.addEventListener('load', loadHandle)

          return {
            id,
            src,
            logoSrc,
            homeSrc,
            findSrc,
            privateSrc,
            title,
            homeBack
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
